/* 
背景颜色  rgba(20, 24, 29, 1)
文字颜色  #fff
边框颜色  rgba(53, 62, 72, 1)
按钮主色调 rgba(117, 129, 143, 1)
iconfont图标颜色 rgb(209, 209, 209)
分数颜色   #52c41a
*/
.flex {
  display: flex;
}
.flex-center{
  display: flex;
  justify-content: center;
}
.flex-around{
  display: flex;
  justify-content: space-around;
}
.flex-between{
  display: flex;
  justify-content: space-between;
}


// 自动生成各种大小的字号，用法如 class="fs-20"
$fsizes: 12,
  13,
  14,
  15,
  16,
  17,
  18,
  19,
  20,
  21,
  22,
  23,
  24,
  25,
  26,
  27,
  28,
  29,
  30;

@each $fsize in $fsizes {
  .fs-#{$fsize} {
    font-size: #{$fsize}px;
  }
}

// 自动生成各种尺寸的 paading 及 margin，用法如 class="pd-20 mt-10"
$sizes: 0,
  1,
  2,
  3,
  4,
  5,
  6,
  7,
  8,
  9,
  10,
  15,
  20,
  25,
  30,
  35,
  40,
  45,
  50;

// 放一个循环内生成会造成权重不够的问题
@each $size in $sizes {
  .pd-#{$size} {
    padding: #{$size}px;
  }
}

@each $size in $sizes {

  .pt-#{$size},
  .padding-top-#{$size} {
    padding-top: #{$size}px;
  }

  .pr-#{$size},
  .padding-right-#{$size} {
    padding-right: #{$size}px;
  }

  .pb-#{$size},
  .padding-bottom-#{$size} {
    padding-bottom: #{$size}px;
  }

  .pl-#{$size},
  .padding-left-#{$size} {
    padding-left: #{$size}px;
  }

  .mg-#{$size} {
    margin: #{$size}px;
  }

  .mt-#{$size},
  .margin-top-#{$size} {
    margin-top: #{$size}px;
  }

  .mr-#{$size},
  .margin-right-#{$size} {
    margin-right: #{$size}px;
  }

  .mb-#{$size},
  .margin-bottom-#{$size} {
    margin-bottom: #{$size}px;
  }

  .ml-#{$size},
  .margin-left-#{$size} {
    margin-left: #{$size}px;
  }
}

/* 可点击标签指针样式 */
.pointer {
  cursor: pointer;
}

.scrollable {
  // 出现滚动条的统一样式，不知道怎么生效，要用的暂时先来复制吧
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
  }
}